<template>
  <div class="video-box" id="qnVideo-box">
    <div class="cover img-box" @click="try2play()" v-if="isCover">
      <img class="img-max" :src="config.poster" />
      <i class="fa fa-spinner fa-pulse" v-if="isLoading"></i>
      <i class="fa fa-play" v-else></i>
    </div>
    <!-- <button type="button" class="posrb" @click="fs()">全屏</button> -->
  </div>
</template>

<script>
import { bus } from '@/bus.js';
import { QNRTPlayer } from 'qn-rtplayer-web';

export default {
  name: 'qiniuVPlayer',
  props: {
    poster: {
      type: String,
    },
    m3u8: {
      type: String,
    },
    rtmp: {
      type: String,
    },
  },
  data() {
    return {
      state: 0,
      isLoading: false,
      isCover: true,
      player: null,
    };
  },
  computed: {
    config() {
      return {
        objectFit: 'contain',
        controls: true,
        controlsList: 'default',
        playsinline: false,
        poster: this.poster,
        fullScreen: true,
      };
    },
  },
  methods: {
    fs: function() {
      let el = document.querySelector('#qnVideo-box .qn-rtplayer-media');
      el.requestFullscreen().then((res) => {
        // console.log(res);
      });
    },
    try2play: function() {
      this.isLoading = true;

      let url = this.m3u8;
      if (url == '') return;
      let config = this.config;
      let el = document.getElementById('qnVideo-box');
      this.player.play(url, el, config);
      this.player.setConfig({
        controls: true,
      });

      this.player.on('playerStateChanged', (state) => {
        this.state = state;
        if (state == 0) {
        } //播放器默认状态，release 后也回到该状态
        if (state == 1) {
          this.$nextTick(() => {
            this.isCover = false;
            this.isLoading = true;
          });
        } //播放器已完成初始化，init 之后进入该状态
        if (state == 2) {
        } //播放器连接完成状态，完成和媒体服务连接后进入该状态
        if (state == 3) {
          this.$nextTick(() => {
            this.isCover = false;
            this.isLoading = false;
          });
        } //播放器正在播放状态，当有音视频帧渲染后进入该状态
        if (state == 4) {
        } //播放器停止状态，stop 之后进入该状态
        if (state == 5) {
          // this.$emit('planB');
        } //播放器错误状态，当播放发生错误进入该状态
      });
    },
  },
  mounted() {
    this.player = new QNRTPlayer();
    this.player.init();
    this.try2play();
  },
  beforeDestroy() {},
};
</script>

<style>
.video-box {
  position: relative;
  background-color: #000;
}
.cover {
  z-index: 5;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
}
.cover .fa {
  z-index: 6;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 12vw;
  height: 12vw;
  font-size: 12vw;
  margin: auto;
}
.posrb {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  width: 20vw;
  height: 10vh;
}
</style>
